@import "./base.styl"

.detail {
  width: 100%;

  .detailTitle {
    margin: 0;
    padding: 10px 15px;
    background #fafafa
    display flex

    .backtoPage {
      width: 12px
      height 20px
      margin-top 2px
      padding: 0;

      a {
        display: block;
        width: 100%;
        height: 100%;

        img {
          width: 12px
          height 20px
          vertical-align: middle;
        }
      }
    }

    .title {
      padding: 0;
      text-align: center;
      font-size 18px
      color: #000;
      font-weight: bolder;
      flex 1
    }

    .report {
      line-height 25px
      color #0d0d0d
      font-weight bolder
      font-size 22px
      letter-spacing -5px
    }

    .attenPop {
      padding: 0;
      font-size 20px
      color: #0d0d0d;
    }
  }

  .dataListCont {
    padding 15px
    margin-bottom 15px;
    clear: both;
    background-color #fff;

    .list-top {
      margin: 0;
      display flex

      .list-top-profile {
        display: inline-block;
        width 32px
        height 32px
        max-width 42px
        border-radius: 50%;
        padding-left: 0;
        padding-right: 0;

        img {
          width 32px
          height 32px
          vertical-align: middle;
        }
      }

      .list-top-info {
        padding-left: 10px;
        line-height: 1;
        flex 1

        .list-top-info-title {
          font-size 14px
          padding-top 2px

          a {
            display: block;
            width: 100%;
            font-weight: bold;
            color: #0d0d0d;
          }
        }

        .list-top-info-publishTime {
          clear: both;
          margin-top 5px
          font-size 12px
          color: #939393;
        }
      }

      .list-top-attent {
        display: inline-block;
        padding: 0;
        max-width 70px

        a {
          display: block;
          border: 1px solid #138FF2;
          border-radius: 4px;
          color: #138FF2;
          font-size 12px
          width 70px
          height 28px
          line-height 28px
          margin-top 2px
          text-align: center;
        }

        a.gray {
          color: #939393;
          border: 1px solid #939393;
        }
      }
    }

    .list-mid {
      clear: both;
      margin-top 15px

      .list-mid-publish-content {
        position: relative;

        .contDesc {
          color: #0d0d0d;
          font-size 16px
          line-height 28px
        }

        .queryDetail {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1;

          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        p {
          clear: both;
          padding-top 5px
          font-size 12px
          margin: 0;
          color: #507DAF;
        }
      }

      .list-mid-publish-img {
        clear: both;
        overflow hidden
        width 100%;

        span {
          display: inline-block;
          margin-right 5px
          margin-top 10px

          img {
            width 80px
            height 80px
            border-radius: 2px;
          }
        }
      }
    }

    .list-bot {
      clear: both;
      height 24px
      line-height 24px
      margin: 15px 0 0;
      position: relative;

      em {
        font-style normal
      }

      .dianzan {
        display: inline-block;
        color: #939393;
        font-size 12px
        padding: 0;

        span {
          display: inline-block;
          width 15px
          height 15px
          margin-right 5
          background: url(../../assets/img/zan.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }

      }

      .dianzan.active {
        color: #138FF2;

        span {
          background: url(../../assets/img/zan-Hover.png) no-repeat left center;
          background-size: contain;
        }
      }

      .sendmsg {
        display: inline-block;
        color: #939393;
        font-size 12px
        padding: 0;

        span {
          display: inline-block;
          width 16px
          height 16px
          margin-right 5px
          background: url(../../assets/img/commitNumers.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }
      }

      .share {
        display: inline-block;
        color: #939393;
        font-size 12px
        padding: 0;

        span {
          display: inline-block;
          width 16px
          height 16px
          margin-right 5px
          background: url(../../assets/img/shareIcon.png) no-repeat left center;
          background-size: contain;
          vertical-align: text-top;
        }
      }

      .attenPop {
        color: #939393;
        padding: 0;
        text-align: right;
        font-size 20px
        line-height 17
        font-weight: bolder;
        height 24px
      }
    }
  }

  .vueTab {
    clear: both;
    margin-top 10px
    padding-bottom 44px

    .tab {
      margin-left 15px
      padding-top 10px
      padding-bottom 10px
      border-bottom: 1px solid #e5e5e5;
      overflow: hidden;

      span {
        display: inline-block;
        float: left;
        margin-right 10px
        font-size 13px
        color: #939393;
        font-weight bolder
      }

      span.active {
        color: #0d0d0d;
      }
    }

    .tabCon {
      clear: both;
      width: 100%;
      padding-bottom 20px

      .list {
        clear: both;
        padding 15px 15px 0

        .list-top {
          margin: 0;
          display flex

          .list-top-l {
            padding: 0;
            width 24px

            img {
              width 24px
              height 24px
              border-radius: 50%;
            }
          }

          .list-top-r {
            padding-left: 10px;
            padding-right: 0;
            color: #939393;
            font-size 14px
            line-height 30px
            flex 1

            a {
              display: inline-block;
              color: #0d0d0d;
              margin-right 10px
              font-weight bolder
            }

            a.second {
              margin-left 5px
            }
          }
        }

        .list-mid {
          margin: 0;
          margin-top 10px
          display flex

          .list-mid-l {
            padding: 0;
            width 24px
          }

          .list-mid-r {
            padding-right: 0;
            padding-left: 10px;
            color: #0d0d0d;
            font-size 14px
            line-height 20px
            flex 1
          }
        }

        .list-bot {
          margin 15px 0 0 34px
          overflow hidden
          border-bottom 1px solid #e5e5e5
          padding-bottom 5px

          .list-bot-time {
            padding: 0;
            color: #939393;
            font-size 10px
            float left
            display inline-block
          }

          .list-bot-zans {
            padding: 0;
            margin-right  20px
            float right
            display inline-block

            a {
              display: block;
              width: 100%;
              color: #939393;
              font-size 12px
            }

            span {
              display: inline-block;
              float: left;
              vertical-align: middle;
              width 15px
              height 15px
              margin-right 5px
              background: url(../../assets/img/zan.png) no-repeat center;
              background-size: contain;
              margin-top: 2px;
            }
          }

          .list-bot-msg {
            padding: 0;
            float right
            display inline-block

            a {
              display: block;
              width: 100%;
              color: #939393;
              font-size 12px
            }

            span {
              display: inline-block;
              float: left;
              vertical-align: middle;
              width 16px
              height 16px
              margin-right 5px
              background: url(../../assets/img/commitNumers.png) no-repeat center;
              background-size: contain;
              margin-top: 2px;
            }
          }

          .list-bot-coin {
            padding: 0;
            float right
            display inline-block
            margin-right 20px;

            a {
              display: block;
              width: 100%;
              color: #939393;
              font-size 12px
            }

            span {
              display: inline-block;
              float: left;
              vertical-align: middle;
              width 15px
              height 15px
              margin-right 5px
              background: url(../../assets/img/coin.png) no-repeat center;
              background-size: contain;
              margin-top: 1px;
            }
          }
        }
      }

      .moreReplay {
        clear both
        text-align center
        width 100%

        a {
          display block
          width 100%
          padding 10px 0
          font-size 14px
          color #138ff2
          font-weight bolder
        }
      }
    }
  }

  .bottombar {
    position: fixed;
    bottom: 0;
    height: 54px;
    width: 100%;
    background #fafafa

    .bottombat-height {
      height: 54px;
    }

    .comment {
      width 94%
      margin 13px 10px 0
      position absolute
      top 0
      height: 40px;

      form {
        overflow hidden

        .commentText {
          width 100%
          padding 5px
          color #0d0d0d
          font-size 14px
          background #fff
          border-radius 3px
          box-sizing border-box
          border none
          height 30px
          resize none

          &:focus {
            outline none
          }
        }
      }
    }

    .botlist {
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 750px;
      color: #FAFAFA;
      z-index: 999;
      margin: 0;
      background: #FAFAFA;
      box-shadow: 0 -1px 0 0 #f0f0f0;
      padding 10px 0;

      .col-4 {
        display: inline-block;
        text-align: center;
        position: relative;
        border-right: 1px solid #e6e6e6;

        a {
          display: block;
          width: 100%;
          height: 100%;
          text-align: center;
          color: #0d0d0d;
          font-size 12px

          em {
            display: inline-block;
            font-style: normal;
          }

          span {
            display: inline-block;
            margin-right 5px
          }

          span.zanB {
            background: url(../../assets/img/zan-black.png) no-repeat center;
            width 15px
            height 15px
            background-size: contain;
            vertical-align: middle;
          }

          span.msgB {
            background: url(../../assets/img/commitNumers-black.png) no-repeat center;
            width 16px
            height 15px
            background-size: contain;
            vertical-align: middle;
          }

          span.shareB {
            background: url(../../assets/img/shareIcon-black.png) no-repeat center;
            width 16px
            height 16px
            background-size: contain;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #939393;
  opacity 0.5
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #939393;
  opacity 0.5
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #939393;
  opacity 0.5
}

.comments {
  background-color #fff;
  padding 15px;

  .comments-header {
    border-bottom 1px solid #e5e5e5
    margin-bottom 15px
    line-height 30px
    font-weight bold

  }

  .newlist .list {
    padding 0;
    margin-top 15px
  }
}